<template>
  <div class="flex" :class="[option.className||'']">
    <div class="item_box" v-for="(item, i) in data" :key="i" @click="percentLineClick(item,i);tkPhbClick(item,i);bmrwClick(item,i)">
      <div class="line_box mb">
        <div class="line_cont_box">
          <div :title="item.name" class="text_overflow">{{ item.name }}</div>
          <div class="text_overflow">
            <span>已完成 <i class="color2">{{ item.value }}</i></span><span v-if="item.total">/{{ item.total }}{{ item.unit||'' }}</span>
          </div>
          <div class="lines_box line_mar">
            <div class="line" :style="{width: getPercent(item.value,item.total) + '%',background: option.color||'#2690F3'}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "percentBarList",
  props: {
    data: Array,
    option: Object,
  },
  data(){
    return {

    }
  },
  computed:{
    colsNum(){
      return this.option.colsNum || 3;
    },
    itemStyle(){
      return {
        width: 'calc((100% - '+(this.option.marginRight||0)*(this.colsNum-1)+'px) / '+this.colsNum+')'
      }
    }
  },
  methods: {
    init() {},
    getPercent(value,total){
      return  total>0?(value / total * 100).toFixed(2):0
    },
    bmrwClick(params,i){
     this.$emit('handleBmrwClick',params)
    },
    tkPhbClick(params,i){
      this.$emit('handleTkPhbClick',params)
      // this.EventBus.$emit("handleTkPhbClick",params);
    },
    percentLineClick(params,i){
      params.chartId = this.option.chartId;
      params.dataIndex = i;
      this.EventBus.$emit("handlePercentLineClick", params);
    }
  },
  watch: {
    data: {
      handler: function (val) {
        this.data = val;
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
.item_box{
  width: calc((100% - .5vw * 3) / 4);
  background-color: #F7F8FA;
  padding: .8vh .9vw ;
  margin: 0 .5vw .8vh 0;
}
.item_box:nth-child(4n){
  margin-right: 0;
}
.lines_box{
  width: 100%;
  height: .5vh;
  background: #EAEAEA;
  border-radius: .7vh;
  margin-top: .6vh;
    
}
.line{
  height: 100%;
  border-radius: .7vh;
  position: relative;
}
.tanc_app .item_box{
  width: calc((100% - 2.1vw * 3) / 4);
  padding: 1.8vh 1.7vw ;
  margin: 0 2.1vw 2.2vh 0;
}
.tanc_app .item_box:nth-child(4n){
  margin-right: 0;
}
.tanc_app .lines_box{
  height: 1.3vh;
  background: #EAEAEA;
  border-radius: 1.3;
  margin-top: .6vh;
}
.tanc_app .line{
border-radius: 1.3vh;
}

</style>
